<template>
  <div>
    <!-- pc -->
    <div class="header_wrap u-flex">
      <div class="u-flex u-row-between" :class="indexWidth ? 'indexWidth' : 'pageWidth'">
        <div class="head_left u-flex">
          <img src="@/image/navbar/back.png" class="back hand" v-if="isBack" @click="back" />
          <img src="@/image/navbar/logo.png" class="logo" />
          <div class="name">跨境喵</div>
          <div class="text u-flex" v-if="!token">
            你好，
            <text class="hand" @click="jump('/login')">请登录</text>
            <!-- <div class="free" v-if="!isRegister">免费注册</div> -->
          </div>
        </div>
        <div class="head_right u-flex" v-if="!isRegister">
          <div class="tit hand" @click="jump('/index')">首页</div>
          <div class="tit hand" @click="jump('/')">入驻指南</div>
          <div class="tit hand" @click="goMine" v-if="token">个人中心</div>
          <!-- <div class="user u-flex hand" v-if="token" @click="goMine">
            <div class="user_icon">
              <img :src="userInfo.avatar.preview_url" v-if="userInfo.avatar" />
              <img src="@/image/navbar/head.png" v-else />
            </div>
            <div class="user_name">{{ userInfo.user_name }}</div>
          </div> -->

          <div
            class="btn_wrap"
            v-if="!token"
            @mouseenter="showDropdown = true"
            @mouseleave="handleMouseLeave"
          >
            <div class="btn u-flex-center hand">
              我要入驻
              <img src="@/image/navbar/arrow.png" alt="" />
            </div>
            <!-- 下拉菜单 -->
            <div class="dropdown-menu" v-show="showDropdown" @mouseenter="showDropdown = true">
              <div class="dropdown-menu-item">
                <div
                  class="dropdown-item hand u-flex-center"
                  v-for="item in storeList"
                  :key="item.id"
                  @click="handleItemClick(item)"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 占位 -->
    <div class="hei_occupy" v-if="navPosition"></div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'

  const props = defineProps({
    // 当前索引
    navIndex: {
      type: Number,
      default: 0,
    },
    // 页面宽度是否按照首页宽度
    indexWidth: {
      type: Boolean,
      default: false,
    },
    // 是否占位
    navPosition: {
      type: Boolean,
      default: true,
    },
    // 是否在注册
    isRegister: {
      type: Boolean,
      default: false,
    },
    // 是否展示返回按钮
    isBack: {
      type: Boolean,
      default: false,
    },
  })

  const router = useRouter()
  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const store = useStore()

  const showDropdown = ref(false)
  const token = ref(localStorage.getItem('token'))
  const is_super = ref(localStorage.getItem('is_super')) //1超管  0供应商 2采购商

  const storeList = ref([
    { id: 1, title: '供货商' },
    { id: 2, title: '店家' },
  ])
  const userInfo = ref({})

  onMounted(() => {
    // 初始化逻辑
    if (token.value) {
      userInfoFn()
    }
  })

  const userInfoFn = () => {
    store.dispatch('home/userInfoApi').then(res => {
      userInfo.value = res.data.userInfo
    })
  }

  const handleItemClick = item => {
    jump('/register?type=' + item.id)

    // 这里可以添加具体的业务逻辑
    showDropdown.value = false
  }

  const handleMouseLeave = () => {
    // 延迟关闭，给用户时间移动到下拉菜单
    setTimeout(() => {
      showDropdown.value = false
    }, 100)
  }

  const back = () => {
    router.go(-1)
    clearStoragFn()
  }

  const goMine = () => {
    if (is_super.value == 0) {
      jump('/supplier')
    } else if (is_super.value == 2) {
      jump('/purchaser')
    }
  }

  const jump = url => {
    router.push(url)
    clearStoragFn()
  }

  const clearStoragFn = () => {
    localStorage.removeItem('classIndex') //采购中心分类缓存
    localStorage.removeItem('currentPage') //分页缓存
    localStorage.removeItem('storeGoods') //自营商品分类缓存
  }

  // 暴露方法给父组件
  defineExpose({
    userInfoFn,
  })
</script>

<style scoped lang="less">
  @media screen and (max-width: 1920px) {
    .header_wrap {
      .head_left {
        .back {
          width: 14px !important;
          margin-right: 20px !important;
        }
        .logo {
          width: 40px !important;
        }
      }
    }
  }
  @media screen and (max-width: 1700px) {
    .hei_occupy {
      height: 60px !important;
    }

    .header_wrap {
      height: 60px !important;

      .head_left {
        .logo {
          margin-right: 8px !important;
        }
        .name {
          font-size: 16px !important;
          margin-right: 40px !important;
        }
        .text {
          font-size: 13px !important;

          .free {
            margin-left: 15px !important;
          }
        }
      }

      .head_right {
        .tit {
          font-size: 14px !important;
          margin-right: 25px !important;
        }

        // 用于悬浮销售管理拉下内容
        .btn_wrap {
          .btn {
            width: 130px !important;
            font-size: 13px !important;
          }

          // 下拉菜单
          .dropdown-menu {
            .dropdown-menu-item {
              width: 130px !important;

              .dropdown-item {
                font-size: 13px !important;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 1500px) {
    .header_wrap {
      .head_left {
        .back {
          width: 12px !important;
          margin-right: 15px !important;
        }

        .logo {
          width: 38px !important;
        }
      }
    }
    .user {
      .user_icon {
        width: 28px !important;
        height: 28px !important;
        margin-right: 8px !important;
      }

      .user_name {
        font-size: 13px !important;
      }
    }
  }
  .hei_occupy {
    height: 65px;
  }

  .header_wrap {
    height: 65px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;

    .head_left {
      .back {
        width: 16px;
        height: auto;
        margin-right: 25px;
      }
      .logo {
        width: 42px;
        height: auto;
        margin-right: 10px;
      }
      .name {
        font-size: 18px;
        font-weight: bold;
        color: #3d3d3d;
        margin-right: 47px;
      }
      .text {
        color: #3d3d3d;
        font-size: 14px;

        text {
          color: #5463ff;
        }
        .free {
          margin-left: 20px;
        }
      }
    }

    .head_right {
      color: #3d3d3d;

      .tit {
        font-size: 16px;
        margin-right: 30px;
      }

      // 用于悬浮销售管理拉下内容
      .btn_wrap {
        position: relative;

        .btn {
          width: 136px;
          aspect-ratio: 16/4.7;
          font-size: 14px;
          background: #5463ff;
          border-radius: 22px;
          color: #fff;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        // 下拉菜单
        .dropdown-menu {
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 3;
          padding-top: 5px;
          animation: fadeInDown 0.3s ease;

          .dropdown-menu-item {
            width: 136px;
            background: #fff;
            border: 1px solid #e6eaf0;
            border-radius: 8px;
            padding: 6px;
            box-sizing: border-box;
            box-shadow: 0px 4px 10px 0px rgba(12, 31, 80, 0.1608);

            .dropdown-item {
              width: 100%;
              aspect-ratio: 10/3.5;
              margin: 0 auto;
              border-radius: 6px;
              font-size: 14px;
              transition: background-color 0.2s ease;

              &:hover {
                background: #f5f6f8;
              }
            }
          }
        }
      }

      .user {
        .user_icon {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .user_name {
          font-size: 14px;
          color: #3d3d3d;
        }
      }
    }
  }

  // 下拉动画
  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
